<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟考试</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">
    <style>
        .card {
            min-height: 400px;
        }
    </style>
</head>

<body>
    <div class="container mt-2">
        <div class="col-md-9 col-lg-6 col-xl-5">
            <div class="d-flex justify-content-center">
                <h3 class="h5">国四模拟考试</h3>
            </div>
            <div class="mb-2 d-flex">
                <span style="width: 3rem;" id="selectNum">100</span>
                <input type="range" step="5" class="form-range me-2" min="5" max="100" id="customRange" value="100" onmousemove="onChange()" onchange="onChange();">
                <button class="btn btn-primary btn-sm" style="width: 4rem;" onclick="getExerciseProblems()">选题</button>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between">
                    <div>题目代码： <span id="exerciseProblemsID"></span></div>
                    <div><i id="exerciseProblemsType" class="me-2"></i></div>
                </div>
                <div class="card-body border-bottom">
                    <p class="card-text" id="exerciseProblems"></p>
                </div>
                <div class="card-body">
                    <p class="card-text">可选答案</p>
                    <div class="d-flex flex-column" id="answerContent">
                    </div>
                </div>
                <div class="card-footer d-flex">
                    <button class="btn btn-primary btn-sm" id="btnCommit">提交答案</button>
                    <button class="btn btn-success btn-sm d-none" id="btnTestScore"
                        onclick="displayScore();">查看分数</button>
                    <div class="ms-3 d-flex align-items-center" id="rightAnswer"></div>
                </div>
            </div>
            <span id="pageNum"></span> <!-- 显示当前页和总页数 -->
            <!-- 最终答案信息区 -->
            <div class="d-none" id="answerMsg" role="alert">
                <span class="ms-2"></span>
            </div>
        </div>
    </div>

    <!-- js脚本 -->
    <script src="../Bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/holder.js"></script>
    <script>
        let exerciseProblemsData;       //存储ajax获取的题目数据
        let pageNum = 0;                //当前页
        let sAnswer;                    //单选标准答案数据
        let sSelect;                    //单选提交的数据
        let mAnswer = [];               //多选标准答案
        let mSelect = [];               //多选提交数据
        let exerciseProblemsType;       //试题类型
        let testScore = 0;              //起始考试分数
        let exerciseProblemsNum = 0;    //考试题数量

        // 获取试题函数
        function getExerciseProblems() {
            exerciseProblemsNum = $("#customRange").val();
            $.ajax({
                type: 'get',
                url: 'http://wp.jsfw.net/cyjpx/ajax/exerciseProblemsTestDisplay.php',
                data: {
                    tType: '服务站培训',
                    eGroup: '国四培训',
                    number: exerciseProblemsNum
                },
                dataType: 'jsonp',
                jsonp: "jsoncallback",
                success: function (data) {
                    if (data.length == 0) {
                        alert("未获取到试题");
                        return;
                    }
                    exerciseProblemsData = data;
                    pageNum = 0;
                    setExerciseProblems();
                    localStorage.setItem('testScore', 0);                //测试分数清零
                },
                error: function () {
                    alert('Ajax获取数据失败!');
                }
            });
            $("#btnCommit").removeClass("d-none").addClass("d-clock");
            $("#btnTestScore").removeClass("d-clock").addClass("d-none");
            $("#rightAnswer").text("");
            $("#answerMsg").removeClass().addClass("d-none");
            testScore = 0;
        }
        //  设置问题
        function setExerciseProblems() {
            $("#exerciseProblemsID").text(exerciseProblemsData[pageNum].ExerciseProblemsID);
            $("#exerciseProblems").text(exerciseProblemsData[pageNum].ExerciseProblems);
            setExerciseProblemsType(exerciseProblemsData[pageNum].ExerciseProblemsType);
            $("#pageNum").text(pageNum + 1 + " / " + exerciseProblemsData.length);
            getAnswer(exerciseProblemsData[pageNum].ExerciseProblemsID, exerciseProblemsData[pageNum].ExerciseProblemsType);
        }
        // 获得试题答案函数
        function getAnswer(ExerciseProblemsID, type) {
            $.ajax({
                // async: false,
                type: 'get',
                url: 'http://wp.jsfw.net/cyjpx/ajax/answerDisplay.php',
                data: {
                    exerciseProblemsID: ExerciseProblemsID
                },
                dataType: 'jsonp',
                jsonp: "jsoncallback",
                success: function (data) {
                    $("#answerContent").empty();
                    switch (type) {
                        case '单选题':
                            sSelect = null;
                            for (var i = 0; i < data.length; i++) {
                                if (data[i].IsRight == '1') {
                                    sAnswer = data[i].AnswerMark;
                                }
                                $("#answerContent").append("<div class='form-check'>\
                                    <input onclick='selectRadioAnswer(this)' class='form-check-input' type='radio' name='rName' id='r" + i + "' value=" + data[i].AnswerMark + ">\
                                    <label class='form-check-label' for='r" + i + "'><span class='text-secondary'>" + data[i].AnswerMark + " : </span>" + data[i].Answer + "</label></div>");
                            }
                            break;
                        case '多选题':
                            mSelect = [];
                            mAnswer = [];
                            for (var i = 0; i < data.length; i++) {
                                if (data[i].IsRight == 1) {
                                    mAnswer.push(data[i].AnswerMark);
                                }
                                $("#answerContent").append("<div class='form-check'>\
                                    <input onclick='selectCheckBoxAnswer()' class='form-check-input' type='checkbox' name='cName' id='c" + i + "' value=" + data[i].AnswerMark + ">\
                                    <label class='form-check-label' for='c" + i + "'><span class='text-secondary'>" + data[i].AnswerMark + " : </span>" + data[i].Answer + "</label></div>");
                            }
                            break;
                        case '判断题':
                            sSelect = null;
                            sAnswer = data[0].IsRight;
                            $("#answerContent").append("<div class='form-check'>\
                                <input onclick='selectTrueOrFalse(this)' class='form-check-input' type='radio' name='rName' id='r1' value=1>\
                                <label class='form-check-label' for='r1'><span class='text-secondary'>A：</span>正确</label></div>");
                            $("#answerContent").append("<div class='form-check'>\
                                <input onclick='selectTrueOrFalse(this)' class='form-check-input' type='radio' name='rName' id='r0' value=0>\
                                <label class='form-check-label' for='r0'><span class='text-secondary'>B：</span>错误</label></div>");
                            break;
                    }
                },
                error: function () {
                    alert('Ajax获取答案失败!');
                }
            })
        }
        // 向后翻页
        function next() {
            $("#answerMsg").removeClass().addClass("d-none");
            pageNum++;
            if (pageNum < exerciseProblemsData.length) {
                setExerciseProblems();
            } else {
                $("#btnCommit").toggleClass("d-none");
                $("#btnTestScore").toggleClass("d-none");
            }
            $("#rightAnswer").text("");
        }
        // 设置试题类型(图标样式)
        function setExerciseProblemsType(type) {
            exerciseProblemsType = type
            switch (type) {
                case '单选题':
                    $("#exerciseProblemsType").removeClass();
                    $("#exerciseProblemsType").addClass("bi bi-ui-radios-grid");
                    break;
                case '多选题':
                    $("#exerciseProblemsType").removeClass();
                    $("#exerciseProblemsType").addClass("bi bi-ui-checks-grid");
                    break;
                case '判断题':
                    $("#exerciseProblemsType").removeClass();
                    $("#exerciseProblemsType").addClass("bi bi-check2-square");
                    break;
            }
        }
        // 点选单选答案
        function selectRadioAnswer(e) {
            $("#rightAnswer").text("你选择了答案：" + e.value);
            sSelect = e.value;
        }
        // 点选多选答案
        function selectCheckBoxAnswer(e) {
            obj = document.getElementsByName("cName");
            mSelect = [];
            for (k in obj) {
                if (obj[k].checked)
                    mSelect.push(obj[k].value);
            }
            $("#rightAnswer").text("你选择了答案：" + mSelect);
        }
        // 点选判断题答案
        function selectTrueOrFalse(e) {
            sSelect = e.value;
            if (e.value == 1) {
                $("#rightAnswer").text("你选择了答案：A");
            } else {
                $("#rightAnswer").text("你选择了答案：B");
            }
        }
        // 点击提交按钮
        $("#btnCommit").click(function () {
            if (exerciseProblemsType == "多选题") {
                if (mSelect.length == 0) {
                    alert("您没有选择答案");
                    return;
                }
            } else {
                if (sSelect == null) {
                    alert("您没有选择答案");
                    return;
                }
                if (sAnswer == sSelect) {
                    rightMsg();
                }
            }
            next();
        })
        // 正确提示 记录分数
        function rightMsg() {
            testScore++;
            console.log(testScore);
        }
        // 查看分数
        function displayScore() {
            // alert("您的模拟考试得分为 " + (testScore / exerciseProblemsNum) * 100);
            $("#answerMsg").removeClass().addClass("alert alert-success d-clock");
            $("#answerMsg span").text("您的模拟考试得分为" + ((testScore / exerciseProblemsNum) * 100));
        }
        // 选题数
        function onChange(){
            var selectNum = $("#customRange").val();
            $("#selectNum").text(selectNum);
        }
    </script>
</body>

</html>